<template>
  <view>
    <fu-custom bgColor="bg-white" :isBack="true">
      <block slot="content"><text class="text-title">提现</text></block>
      <block slot="right">
        <!-- <view @tap="toLog" class="text-lg">绑卡</view> -->
      </block>
    </fu-custom>
    <!-- 输入提现金额 start -->
    <view class="tx_cont margin-top-sm padding" :style="[{ top: CustomBar + 'px' }]">
      <text class="text-333 text-lg text-bold">提现金额</text>
      <view class="tx_box padding-tb solid-bottom flex align-center justify-between">
        <view class="flex-sub flex align-center">
          <text class="f56 text-333">¥</text>
          <input class="margin-left-sm" type="number" :placeholder="'账户余额'+money" v-model="change_money" placeholder-style="font-size: 32rpx; color: #999999;" />
        </view>
      </view>
      <view class="tx_yue margin-top-sm">
        可提现金额 ￥{{money}}  手续费 {{withdraw_handling_fee}}%        <text class="withAll" style="color: #409EFF; margin-left: 10rpx;" @click="total_tx">全部提现</text>
      </view>
    </view>
    <!-- 输入提现金额 end -->

    <!-- 选择提现方式 start -->
    <view class="tx_main padding-lr padding-top">
      <text class="tx_choose text-333 text-bold">请选择提现方式</text>
      <view class="margin-top-xs">
		  <!-- v-if="tabCurrentIndex == 1" -->
        <!-- <view class="padding-tb flex align-center justify-between solid-bottom" @click="get_type" :data-index="1">
          <view class="flex align-center">
            <image class="ali-img margin-right-sm" src="../../static/wechatpay.png" mode=""></image>
            <view class="text-df">微信</view>
          </view>
          <image class="check-img" v-if="tabCurrentIndex == 1" src="../../static/checked.png" mode=""></image>
          <image class="check-img" v-else src="../../static/unchecked.png" mode=""></image>
        </view> -->
		 <!-- v-if="tabCurrentIndex == 2" -->
      <!--  <view class="padding-tb flex align-center justify-between solid-bottom" @click="get_type" :data-index="2">
          <view class="flex align-center">
            <image class="ali-img margin-right-sm" src="../../static/alipay.png" mode=""></image>
            <view class="text-df">支付宝</view>
          </view>
          <image class="check-img" v-if="tabCurrentIndex == 2" src="../../static/checked.png" mode=""></image>
          <image class="check-img" v-else src="../../static/unchecked.png" mode=""></image>
        </view> -->
		<!-- v-if="tabCurrentIndex == 3" -->
       <view class="padding-tb flex align-center justify-between" @click="get_type" :data-index="3">
          <view class="flex align-center">
            <image class="ali-img margin-right-sm" src="../../static/card.png" mode=""></image>
            <view class="text-df">银行卡</view>
          </view>
          <image class="check-img" v-if="tabCurrentIndex == 3" src="../../static/checked.png" mode=""></image>
          <image class="check-img" v-else src="../../static/unchecked.png" mode=""></image>
        </view>
      </view>
			<!-- <view class="form-box">
				<view class="list-box border">
					<view class="lable-text">
						银行卡号
						<text class="text">*</text>
					</view>
					<input class="flex-sub" type="number" v-model="cardInfo.card_no"  placeholder="请输入银行卡号" maxlength="21"
						placeholder-style="color:#BFBFBF;font-size:28rpx;" />
				</view>
				
				<view class="list-box border">
					<view class="lable-text">
						开户银行
						<text class="text">*</text>
					</view>
					<input class="flex-sub" type="text" v-model="cardInfo.card_bank"  placeholder="请输入开户银行" maxlength="21"
						placeholder-style="color:#BFBFBF;font-size:28rpx;" />
				</view>
				<view class="list-box ">
					<view class="lable-text">
						持卡人
						<text class="text">*</text>
					</view>
					<input class="flex-sub" type="text" v-model="cardInfo.card_name"  placeholder="请输入持卡人姓名" maxlength="21"
						placeholder-style="color:#BFBFBF;font-size:28rpx;" />
				</view>
			</view> -->
    </view>
    <!-- 选择提现方式 end -->

    <!-- 立即体现按钮 -->
    <view class="tx_btn" @click="handleSubmit">提现</view>
    <!-- 弹窗  -->
    <fu-popup v-model="showPopup" mode="center" width="540rpx" height="600rpx">
    	<view class="pop-content padding">
    		<view class="text-333 text-bold text-lg text-center">提现规则</view>
    		<view class="margin-top-sm text-999">{{fast_detaile||''}}</view>
    	</view>
    	<view class="padding-top flex align-center justify-center" @tap="closePop">
    		<view class="round close-btn flex align-center justify-center">
    			<text class="cuIcon-close" style="color: #838383;"></text>
    		</view>
    	</view>
    </fu-popup>
    <!-- 输入支付密码 -->
    <pay-keyboard :show_key="show_key" @hideFun="hideFun" @getPassword="getPassword"></pay-keyboard>
    <!-- 断网检测 -->
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
/**
 * @author 刘畅
 */
// @see 引入支付密码组件
import payKeyboard from '../../components/keyboard/keyboard.vue';
export default {
  components: {
    payKeyboard
  },
  data() {
    return {
      withdraw_handling_fee:'', //提现手续费
      CustomBar: this.CustomBar,
      tabCurrentIndex: 1, // {Number} 支付宝还是微信
      money: '', // {String} 账户余额
      account_name: '', // {Number} 没啥用，不敢删
      account: '', // {String} 没啥用，不敢删
      change_money: '', // {String} 用户输入的提现金额
      is_click: false, // {Boolean} 按钮的点击状态
      show_key: false, // {Boolean} 支付密码组件是否显示
      min: 1, // {Number} 最小提现金额
      showPopup: false, // {Boolean} 弹窗显示
      fast_detaile: [] ,// {Object}
			wd_max_money: 1,// {Number} 最大提现金额
			is_ali: false, // {Boolean} 是否绑定支付宝
			is_wx: false, // {Boolean} 是否绑定微信
			is_card: false ,// 是否绑定银行卡
			wxName:'',
			aliName:'',
			cardName:'',
			cardInfo: {
				card_name: '',
				card_bank: '',
				card_no: '',
			}, // 银行卡信息
    };
  },
  onLoad(options) {
    this.getMoney();
	// this.detail(1);
	// this.detail(2);
	// this.detail(3);
  },

  methods: {
	  /**
	   * @function
	   * @description 是否绑定支付宝or微信
	   * @property {Number} account_type - 【账户类型 1 微信 2 支付宝 3 银行卡。类型：tinyint(1)】
	   */
	  detail(type) {
	  	this.$api
	  	  .post(global.apiUrls.getMerchantWithdrawAccount, {
	  	    account_type: type
	  	  })
	  	  .then(res => {
	  	    res = res.data;
	  	    if (res.code == 1) {
	  	      if (type == 1 && res.data.true_name != '' && res.data.qrcode != '' && res.data.account_id != '') {
	  	        this.is_wx = true;
	  	        this.wxName = res.data.true_name;
	  	      } else if (type == 2 && res.data.true_name != '' && res.data.qrcode != '' && res.data.account_id != '') {
	  	        this.is_ali = true;
	  	        this.aliName = res.data.true_name;
	  	      } else if(type == 3 && res.data.true_name != '' && res.data.account_id != '') {
	  	        this.is_card = true;
	  	        this.cardName = res.data.true_name;
	  	      }
	  	    }
	  	  })
	  	  .catch(err => {
	  	    console.log(err, 'get_withdraw_account');
	  	  });
	  },
    /**
     * @function
     * @description 支付密码弹窗隐藏
     */
    hideFun() {
      this.show_key = false;
    },
    /**
     * @function
     * @description 判断用户是否设置支付密码
     * @property {Number} pay_money - 订单金额
     */
    isSetPayPassword() {
      return new Promise(resolve => {
        this.$api.post(global.apiUrls.isSetPay).then(res => {
          res = res.data;
          console.log('是否设置支付密码', res);
          if (res.code == 1) {
            if (res.data.falg == 0) {
              setTimeout(() => {
                this.$urouter.navigateTo('/pages/index/setting/change-pay-password/index');
              }, 800);
              resolve(false);
            } else {
              resolve(true);
            }
          } else {
            this.$message.info(res.msg);
            resolve(false);
          }
        });
      });
    },
    filter(type) {
      switch (Number(type)) {
        case 1:
          return '请先绑定微信';
        case 2:
          return '请先绑定支付宝';
        case 3:
          return '请先绑定银行卡';
      }
    },
	
    // 判断用户是否绑定了提现账户
    isBindAccount() {
      return new Promise(resolve => {
        this.$api
          .get(global.apiUrls.getMerchantWithdrawAccount, {
            account_type: this.tabCurrentIndex
          })
          .then(res => {
            res = res.data;
            console.log('是否绑定了提现账号', res);
            if (res.code == 0) {
              let index = this.tabCurrentIndex
              console.log('未绑定',this.filter(1));
              this.$message.info(this.filter(this.tabCurrentIndex));
              let urls = '/pages/user/wallet/card-bind/index';
							this.$message.info('请前往商家后台绑定提现账号');
              // if (this.tabCurrentIndex == 1) {
              //   urls = '/pages/user/wallet/wechat-bind/index';
              // }
              // if (this.tabCurrentIndex == 2) {
              //   urls = '/pages/user/wallet/alipay-bind/index';
              // }
              // if (this.tabCurrentIndex == 3) {
              //   urls = '/pages/user/wallet/card-bind/index';
              // }
              setTimeout(() => {
                this.$urouter.navigateTo({
                  url: urls,
                  params: {
                    id: 1
                  }
                });
              }, 800);
              resolve(false);
            } else {
              resolve(true);
            }
          });
      });
    },
    /**
     * @event
     * @description 判断用户是否绑定体现账户,如果绑定就去体现
     * @param {Object} n - 用户输入的支付密码
     * @property {Number} account_type - 【账户类型 1 微信 2 支付宝 3 银行卡】
     * @property {Number} type - 【提现类型 1：微信 2：支付宝】
     * @property {Number} money - 【提现金额】
     * @property {Number} pay_password - 支付密码
     */
    getPassword(n) {
      this.$api
        .post(global.apiUrls.postWithdrawByMerchant, {
          type: this.tabCurrentIndex,
          money: this.change_money
        })
        .then(res => {
          res = res.data;
          if (res.code == 1) {
            uni.$emit('changeMoney', {
              msg: '页面更新'
            });
            this.$urouter.redirectTo({
              url: '/pages/user/wallet/withdraw-success/refund',
              params: {
                type: this.filterName(this.tabCurrentIndex),
                money: this.change_money
              }
            });
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log('ERROR', err);
        });
    },
    filterName(type) {
      switch (type) {
        case 1:
          return '微信';
        case 2:
          return '支付宝';
        case 3:
          return '银行卡';
      }
    },
    /**
     * @function
     * @description 开启支付密码组件
     */
    showModal() {
		this.getPassword();
      // this.show_key = true;
    },
    /**
     * @event
     * @description 全部提现
     */
    total_tx() {
      if (parseFloat(this.money) <= 0) {
        this.$message.info('没有可提现的金额');
      } else if (parseFloat(this.money) < parseFloat(this.min)) {
        this.$message.info('当前余额低于最低提现金额限制');
      } else {
        this.change_money = this.money;
      }
    },
    /**
     * @event
     * @description 用户选择提现到支付宝还是微信
     */
    get_type(e) {
      this.tabCurrentIndex = e.currentTarget.dataset.index;
    },
    /**
     * @function
     * @description 获取用户余额
     */
    getMoney() {
      let _this = this;
      const data = {
        partner_id: this.$store.state.userInfo.id,
      }
      this.$api.post(global.apiUrls.getMerchantMoney,data)
      .then(res => {
		  console.log(res)
      	if (res.data.code == 1) {
      		this.money = res.data.data.now_money;
			this.withdraw_handling_fee = res.data.data.withdraw_handling_fee;
			this.min = res.data.data.wd_min_money;
			this.wd_max_money = res.data.data.wd_max_money;
			console.log(this.money)
      	}
      })
      .catch(err => {
        this.showLoading = false;
        console.log('获取店铺信息错误==>',err);
      })
    },
    /**
     * @event
     * @description 点击立即体现按钮
     * 先判断是否绑定了对应账号
     * 再判断是否设置了支付密码
     * 再提现
     */
    async handleSubmit() {
      let isBindAccount = await this.isBindAccount();
      if (!isBindAccount) return;
      console.log('绑定了账号,下一步');
      // let isSetPayPassword = await this.isSetPayPassword();
      // if (!isSetPayPassword) return;
      console.log('设置了支付密码,下一步');
      if (!this.change_money) {
        this.$message.info('请输入提现金额');
        return false;
      }
      if (Number(this.change_money) < Number(this.min)) {
        this.$message.info('最小提现金额为' + this.min + '元');
        return false;
      }
	  console.log(Number(this.change_money),Number(this.money))
      if (Number(this.change_money) > Number(this.money)) {
        this.$message.info('可提现余额不足');
        return false;
      }
	  
	  if (Number(this.change_money) > Number(this.wd_max_money)) {
	    this.$message.info('最大可提现金额是'+this.wd_max_money);
	    return false;
	  }
      this.showModal();
    },
    toLog() {
      this.$urouter.navigateTo('/pages/user/wallet/card-bind/index');
    }
  }
};
</script>

<style lang="scss">
.uni-input-placeholder {
  color: #999;
}
.text-title{
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
// 体现按钮 start
.tx_btn {
  width: calc(100% - 60upx);
  height: 88upx;
  background: #FC6296;
  border-radius: 44upx;
  font-size: 32upx;
  color: white;
  line-height: 88upx;
  text-align: center;
  position: fixed;
  bottom: 60upx;
  left: 30upx;
}

// 提现按钮 end

// 选择提现方式 start
.tx_main {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: white;
  margin-top: 20upx;

  .tx_choose {
    font-size: 32rpx;
  }

  .ali-img {
    width: 52rpx;
    height: 52rpx;
  }

  .check-img {
    width: 36rpx;
    height: 36rpx;
  }

  .payMain {
    margin: 16px 0;
    display: flex;
    justify-content: space-between;
  }

  .tx_mainBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46%;
    height: auto;
    overflow: hidden;
    border-radius: 10rpx;
    border: 1px solid #999;

    .tx_name {
      display: block;
      line-height: 100upx;
      font-size: 30upx;
      color: #333;
      text-align: center;
    }

    &.act {
      border: 1px solid $theme;
    }

    image {
      width: 50upx;
      height: 50upx;
      margin-right: 20upx;
    }
  }

  .act .icon-yuanquan:before {
    content: '\E655';
    color: $theme;
  }
}

.tx_final {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 0 30upx;

  text {
    display: block;
    margin-top: 24upx;
    font-size: 24upx;
    color: #999999;

    text {
      color: $theme;
      display: inline-block;
      margin-left: 6upx;
    }
  }
}

// 选择提现方式 end

// 输入体现金额 start
.tx_cont {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: white;

  .tx_box {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;

    .f56 {
      font-size: 56rpx;
      font-weight: Regular;
    }

    .withAll {
      font-size: 32rpx;
      color: #ff6464;
      font-weight: Medium;
    }

    input {
      display: block;
      width: auto;
      height: 70upx;
      font-size: 50upx;
      line-height: 70upx;
    }
  }

  .tx_yue {
    font-size: 24upx;
    color: #999999;

    .tips {
      font-size: 26rpx;
    }
  }
}

// 输入体现金额 end
// 规则弹窗 start
.pop-content {
  width: 540rpx;
  height: 472rpx;
  border-radius: 24rpx;
  background: #ffffff;
}

.close-btn {
  width: 54rpx;
  height: 54rpx;
  background-color: rgba(255, 255, 255, 0.6);
}

// 规则弹窗 end

.form-box {
	// padding: 0 20rpx;
	background-color: #fff;
	.list-box {
		height: 100rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		.lable-text {
			width: 180rpx;
			// margin-top: 40rpx;
			font-size: 30rpx;
			color: #333333;
			.text {
				position: relative;
				top: -6rpx;
				color: #FE443E;
			}
		}
	}
	.border {
		border-bottom: 1rpx solid #DBDBDB;
	}
}

</style>